<template>
  <div
    class="verify-status-card bg-white full-height"
  >
    <div class="verify-status-content">
      <div style="margin-bottom:10px;">
        <q-icon style="font-size: 80px" name="img:statics/img/home/submitSuccess.svg" v-if="verifyStatus === 'submitSuccess'"></q-icon>
        <q-icon style="font-size: 80px" name="img:statics/img/home/faild.svg" v-else-if="verifyStatus === 'faild'"></q-icon>
        <q-icon style="font-size: 80px" name="img:statics/img/home/verifying.svg" v-else-if="verifyStatus === 'verifying'"></q-icon>
      </div>
      <div class="status-text">{{ verifyText }}</div>
      <div class="status-des">
        <template v-if="verifyStatus === 'submitSuccess'">您好，您的企业认证信息已提交成功，请等待审核结果消息</template>
        <template v-if="verifyStatus === 'verifying'">恭喜您企业入驻申请已提交，24小时内运营人员将会为您审核</template>
        <template v-if="verifyStatus === 'faild'"> 很抱歉，您的企业未通过审核，详情请联系企业微信客服或<span class="btn verify" @click="goVerify">重新认证</span> </template>
      </div>
      <div v-if="verifyStatus === 'faild'" style="margin-bottom: 28px;">
        <q-btn color="primary" @click="visible = true">失败原因</q-btn>
      </div>
      <div class="phone">如有任何疑问可与我们联系：4006-021-808</div>
      <div class="backbtn" v-if="verifyStatus === 'submitSuccess'">
        <q-btn color="primary" style="width:370px;" @click="goBack">返回</q-btn>
      </div>
    </div>
    <basic-dialog :visible="visible"
                  title="失败原因"
                  min-width="400px"
                  isShowClose
                  @close="visible=false"
    >
      <div class="padding-20">{{faildReason}}</div>
    </basic-dialog>
  </div>
</template>

<script>
export default {
  name: 'VerifyStatus',
  props: {
    faildReason: {
      type: String,
      default: ''
    },
    verifyStatus: {
      type: String,
      default: ''
    }
  },
  computed: {
    verifyText () {
      if (this.verifyStatus === 'verifying') {
        return '审核中'
      } else if (this.verifyStatus === 'faild') {
        return '审核失败'
      }
      return ''
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    goBack () {
      this.$emit('back')
    },
    goVerify () {
      this.$emit('verify')
    }
  }
}
</script>

<style scoped lang="scss">
.verify-status-card {
  //@include cardBorder();
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  position: relative;
  .verify-status-content {
    position: absolute;
    width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #575d6c;
    font-size: 16px;
    .status-text {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 28px;
    }
    .status-des {
      margin-bottom: 28px;
      font-weight: 400;
      .btn {
        color: #5F77FD;
        cursor: pointer;
      }
    }
    .phone {
      font-weight: 500;
      margin-bottom: 28px;
      color: #c7c7c7;
    }
  }
}
</style>
